<template>
  <div class="defect-detail-page" v-loading="loading">
    <div class="page-header">
      <el-button
        type="text"
        :icon="ArrowLeft"
        @click="handleBack"
        class="back-button"
      >
        返回
      </el-button>
      <h2 class="page-title">缺陷详情</h2>
    </div>

    <div class="page-content" v-if="defect">
      <DefectDetailDialog
        :visible="true"
        :defect="defect"
        :append-to-body="false"
        @update:visible="handleClose"
        @updated="handleDefectUpdated"
      />
    </div>

    <el-empty
      v-else-if="!loading && !defect"
      description="缺陷不存在或已被删除"
    >
      <el-button type="primary" @click="handleBack">返回缺陷列表</el-button>
    </el-empty>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ArrowLeft } from '@element-plus/icons-vue'
import { getDefectById } from '@/api/defect'
import { ResponseParser } from '@/utils/responseParser'
import type { Defect } from '@/api/defect'
import DefectDetailDialog from './components/DefectDetail.vue'

const route = useRoute()
const router = useRouter()

const loading = ref(false)
const defect = ref<Defect | null>(null)

const fetchDefect = async () => {
  const defectId = route.params.id as string
  if (!defectId) {
    ElMessage.error('缺陷ID不存在')
    handleBack()
    return
  }

  loading.value = true
  try {
    const response = await getDefectById(defectId)
    console.log('缺陷详情API响应:', response)
    
    // 处理不同的响应格式
    if (response && typeof response === 'object') {
      // 如果响应有 success 字段
      if ('success' in response) {
        if (response.success && response.data) {
          defect.value = response.data
        } else {
          const errorMessage = response.message || '获取缺陷详情失败'
          ElMessage.error(errorMessage)
          handleBack()
        }
      } 
      // 如果响应直接是数据对象
      else if ('id' in response) {
        defect.value = response as Defect
      }
      // 如果响应有 data 字段
      else if ('data' in response && response.data) {
        defect.value = response.data
      }
      else {
        ElMessage.error('获取缺陷详情失败：响应格式不正确')
        handleBack()
      }
    } else {
      ElMessage.error('获取缺陷详情失败：无效的响应')
      handleBack()
    }
  } catch (error: any) {
    console.error('获取缺陷详情失败:', error)
    const errorMessage = ResponseParser.extractMessage(error) || '获取缺陷详情失败'
    ElMessage.error(errorMessage)
    handleBack()
  } finally {
    loading.value = false
  }
}

const handleBack = () => {
  router.push({ name: 'Defects' })
}

const handleClose = () => {
  handleBack()
}

const handleDefectUpdated = () => {
  // 刷新缺陷数据
  fetchDefect()
}

onMounted(() => {
  fetchDefect()
})
</script>

<style scoped lang="scss">
.defect-detail-page {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #f5f7fa;

  .page-header {
    display: flex;
    align-items: center;
    padding: 16px 24px;
    background: #fff;
    border-bottom: 1px solid #e4e7ed;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

    .back-button {
      margin-right: 16px;
      font-size: 14px;
    }

    .page-title {
      margin: 0;
      font-size: 20px;
      font-weight: 500;
      color: #303133;
    }
  }

  .page-content {
    flex: 1;
    overflow: auto;
    padding: 0;
    position: relative;

    // 覆盖对话框组件的样式，使其在页面中正常显示
    :deep(.defect-detail-dialog) {
      .el-dialog {
        position: relative !important;
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        display: flex !important;
        flex-direction: column;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        box-shadow: none;
        border-radius: 0;
      }

      .el-dialog__header {
        display: none !important;
      }

      .el-dialog__body {
        padding: 24px;
        flex: 1;
        overflow: auto;
        height: 100%;
      }

      .el-overlay {
        position: relative !important;
        background: transparent !important;
      }

      .el-overlay-dialog {
        position: relative !important;
      }
    }
  }
}
</style>

